<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>血液信息查询</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">
    <style>
        .demo-table-expand {
          font-size: 0;
        }
        .demo-table-expand label {
          width: 90px;
          color: #99a9bf;
        }
      </style>
</head>
<body>

<div class="data-manage-table">
    <template>

        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <el-form-item label="血液编号">
                <el-input v-model="pagination.bloodId" placeholder="请输入血液编号"></el-input>
            </el-form-item>

            <el-form-item label="血液状态">
                <el-select v-model="pagination.state" placeholder="请选择或输入血液状态" clearable filterable @blur="selectBlur"
                           @clear = "selectClearState" @change="selectChangeState">
                    <el-option v-for="(item,index) in stateList" :key="index" :label="item.state" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="ABO血型">
                <el-select v-model="pagination.aboBloodType" clearable placeholder="请选择ABO血型">
                    <el-option v-for="item in aboBloodTypeList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="RH血型">
                <el-select v-model="pagination.rhBloodType" clearable placeholder="请选择RH血型">
                    <el-option v-for="item in rhBloodTypeList" :key="item.code" :label="item.name" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血液成分">
                <el-select v-model="pagination.bloodComponent" placeholder="请选择或输入血液成分" clearable filterable @blur="selectBlur"
                           @clear = "selectClearComponent" @change="selectChangeComponent">
                    <el-option v-for="(item,index) in bloodComponentList" :key="item.code" :label="item.composition" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血量">
                <el-select v-model="pagination.bloodCount" clearable placeholder="请选择血量">
                    <el-option v-for="item in bloodSizeList" :key="item.code" :label="item.size" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血袋位置">
                <el-select v-model="pagination.bloodLocation" clearable placeholder="请选择血量">
                    <el-option v-for="item in bloodLocationList" :key="item.code" :label="item.location" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="血液来源">
                <el-select v-model="pagination.bloodSource" clearable placeholder="请选择血液来源">
                    <el-option v-for="item in bloodSourceList" :key="item.code" :label="item.source" :value="item.code">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="有效时间">
                <el-date-picker v-model="pagination.dateVal" type="daterange" size="small" format="yyyy-MM-dd"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                @change="dateFormat">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getByQueryPage(1)">搜索</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="info" @click="getByQueryPage()">重置</el-button>
            </el-form-item>

        </el-form>


        <el-table  id="tableInfo" :data="tableData" style="width: 100%" border
                   :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row fit>
            <el-table-column prop="bloodId" label="血液编号"  align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-button type="text"  @click="viewInfo(scope.row)">{{ scope.row.bloodId }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="bloodComponent" label="血液成分" align="center">
                <template slot-scope="scope">
                    {{ getBloodComponentName(scope.row.bloodComponent) }}
                </template>
            </el-table-column>
            <el-table-column prop="bloodCount" label="血量" align="center">
                <template slot-scope="scope">
                    {{ getBloodSizeName(scope.row.bloodCount) }}
                </template>
            </el-table-column>
            <el-table-column prop="aboBloodType" label="ABO血型"  align="center">
                <template slot-scope="scope">
                    {{ getAboBloodName(scope.row.aboBloodType) }}
                </template>
            </el-table-column>
            <el-table-column prop="rhBloodType" label="RH血型" align="center">
                <template slot-scope="scope">
                    {{ getRhBloodName(scope.row.rhBloodType) }}
                </template>
            </el-table-column>
            <el-table-column prop="collectTime" label="采集时间" width="200"  align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    {{ scope.row.collectTime }}
                </template>
            </el-table-column>
            <el-table-column prop="failureTime" label="失效时间" width="200"   align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    {{ scope.row.failureTime }}
                </template>
            </el-table-column>
            <el-table-column prop="bloodSource" label="血液来源"  align="center">
                <template slot-scope="scope">
                    {{ getBloodSourceName(scope.row.bloodSource) }}
                </template>
            </el-table-column>
            <el-table-column prop="state" label="状态"  align="center">
                <template slot-scope="scope">
                    {{ getStateName(scope.row.state) }}
                </template>
            </el-table-column>
            <el-table-column prop="bloodLocation" label="血袋位置"  align="center">
                <template slot-scope="scope">
                    {{ getBloodLocationName(scope.row.bloodLocation) }}
                </template>
            </el-table-column>

            <!-- 相关操作 -->
            <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope" style="-webkit-border-vertical-spacing: 3px">
                    <el-row><el-button size="small" type="danger" :disabled="scope.row.state == '15'||scope.row.state == '16'||scope.row.state == '14'||scope.row.state == '4'" @click="DiscardFormVisible = true;discardTableData(scope.row)">报废</el-button></el-row>
                    <el-row><el-button size="small" type="danger" :disabled="scope.row.state == '15'||scope.row.state == '16'||scope.row.state == '14'||scope.row.state == '4'" @click="RecycleFormVisible = true;recycleTableData(scope.row)">回收</el-button></el-row>
                </template>
            </el-table-column>
        </el-table>


        <el-dialog title="血液详细信息" center :visible.sync="dialogDetailVisible" width="60%">
            <el-descriptions :content-style="rowCenter" :label-style="rowCenter" class="margin-top" :column="2" :size="size" border>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液编号
                    </template>
                    {{ detailDes.bloodId }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血装编号条码
                    </template>
                    {{ detailDes.barcode }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        ABO血型
                    </template>
                    {{ detailDes.aboBloodType }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        RH血型
                    </template>
                    {{ detailDes.rhBloodType }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液成分
                    </template>
                    {{ detailDes.bloodComponent }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        状态
                    </template>
                    {{ detailDes.state }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血量
                    </template>
                    {{ detailDes.bloodCount }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        计量单位
                    </template>
                    {{ detailDes.measurementUnit }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血液位置
                    </template>
                    {{ detailDes.bloodLocation }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血液来源
                    </template>
                    {{ detailDes.bloodSource }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        扩展码
                    </template>
                    {{ detailDes.extendCode }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        批次号
                    </template>
                    {{ detailDes.batchNumber }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        入库金额
                    </template>
                    {{ detailDes.inboundAmount }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液金额
                    </template>
                    {{ detailDes.bloodAmount }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        失效时间
                    </template>
                    {{ detailDes.failureTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        采集时间
                    </template>
                    {{ detailDes.collectTime }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>
        <el-dialog title="血液报废" center :visible.sync="DiscardFormVisible" width="1000px" @close="DiscardFormVisible=false">
            <!-- 内容的主体区域 -->
            <el-descriptions :column="3" :size="size" border >
                <el-descriptions-item>
                    <template slot="label">
                        血液编号：
                    </template>
                    {{discardform.bloodId}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血装编号条码:
                    </template>
                    {{discardform.barcode}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血液成分:
                    </template>
                    {{getBloodComponentName(discardform.bloodComponent)}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        ABO血型:
                    </template>
                    {{getAboBloodName(discardform.aboBloodType)}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        RH血型:
                    </template>
                    {{getRhBloodName(discardform.rhBloodType)}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血液金额：
                    </template>
                    {{discardform.bloodAmount}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血液来源:
                    </template>
                    {{getBloodSourceName(discardform.bloodSource)}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        规格:
                    </template>
                    {{ getBloodSizeName(discardform.bloodCount)}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        计量单位:
                    </template>
                    {{discardform.measurementUnit}}
                </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            报废原因:
                        </template>
                        <el-select v-model="discardform.scrapReason">
                            <el-option v-for="item in blooddiscardreasonlist" :key="item.code" :label="item.name"
                                       :value="item.code">
                            </el-option>
                        </el-select>
                    </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        申请人工号:
                    </template>
                    {{discardform.applicantId}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        申请人:
                    </template>
                    {{discardform.applicant}}
                </el-descriptions-item>

            </el-descriptions>
<!--            <el-form ref="form" :model="discardform" label-width="120px">-->
<!--                <el-form-item label="血液编号">-->
<!--                    <el-input v-model="discardform.bloodId" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="血装编号条码">-->
<!--                    <el-input v-model="discardform.barcode" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="血液成分">-->
<!--                    <el-input v-model="discardform.bloodComponent" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="ABO血型">-->
<!--                    <el-input v-model="discardform.aboBloodType" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="RH血型">-->
<!--                    <el-input v-model="discardform.rhBloodType" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="血液金额">-->
<!--                    <el-input v-model="discardform.bloodAmount" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="血液来源">-->
<!--                    <el-input v-model="discardform.bloodSource" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="规格">-->
<!--                    <el-input v-model="discardform.bloodCount" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="计量单位">-->
<!--                    <el-input v-model="discardform.measurementUnit" :disabled="true"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="报废原因" >-->
<!--                    <el-select v-model="discardform.scrapReason">-->
<!--                        <el-option v-for="item in blooddiscardreasonlist" :key="item.code" :label="item.name"-->
<!--                                   :value="item.code">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                <el-form-item label="申请人工号" >-->
<!--                    <el-input v-model="discardform.applicantId" style="width:180px; float: right;"></el-input>-->
<!--                </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                <el-form-item label="申请人" >-->
<!--                    <el-input v-model="discardform.applicant" style="width:180px; float: right;"></el-input>-->
<!--                </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </el-form>-->
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="DiscardFormVisible= false">取 消</el-button>
                <el-button type="primary" @click="DiscardDetermine">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="血袋回收" center :visible.sync="RecycleFormVisible" width="1000px" @close="RecycleFormVisible=false">
            <!-- 内容的主体区域 -->
            <el-descriptions :column="2" :size="size" border>
                <el-descriptions-item>
                    <template slot="label">
                        血袋编码：
                    </template>
                    {{recycleform.bloodId}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        血袋位置:
                    </template>
                    {{getBloodLocationName(recycleform.bloodLocation)}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        回收人工号:
                    </template>
                    {{recycleform.recyclePeopleNumber}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        回收人:
                    </template>
                    {{recycleform.recyclePeople}}
                </el-descriptions-item>
            </el-descriptions>
<!--            <el-form ref="form" :model="recycleform" label-width="120px">-->
<!--&lt;!&ndash;                <el-form-item label="血袋编码">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-input v-model="recycleform.bloodId" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-form-item>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-form-item label="血袋位置">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-input v-model="recycleform.bloodLocation" :disabled="true"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-form-item>&ndash;&gt;-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                <el-form-item label="回收人" >-->
<!--                    <el-input v-model="recycleform.recyclePeople" style="width:180px; float: right;"></el-input>-->
<!--                </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                <el-form-item label="回收人工号" >-->
<!--                    <el-input v-model="recycleform.recyclePeopleNumber" style="width:180px; float: right;"></el-input>-->
<!--                </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </el-form>-->
            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="RecycleFormVisible= false">取 消</el-button>
                <el-button type="primary" @click="RecycleDetermine">确 定</el-button>
            </span>
        </el-dialog>



<!--            &lt;!&ndash; 相关操作 &ndash;&gt;-->
<!--           <el-table-column label="操作" width="100" align="center">-->
<!--               <template slot-scope="scope">-->
<!--                   <el-button size="small" type="danger" @click="changeFormVisible = true;editTableData(scope.row)">编辑</el-button>-->
<!--               </template>-->
<!--            </el-table-column>-->




        <!--分页组件-->
        <div class="pagination-container">
            <el-pagination
                    class="pagiantion"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[2,4,6,8,10]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    style="text-align: center; margin-top: 20px;">
            </el-pagination>
        </div>


    </template>

</div>

<!--<script src="/plugins/vue-2.6.11/vue.js"></script>-->
<!--v-->
<!--<script src="/js/jquery.min.js"></script>-->
<!--&lt;!&ndash;    <script src="../plugins/element-2.4.5/index.js"></script>&ndash;&gt;-->
<!--&lt;!&ndash;<script src="/js/2.15.12/index.js"></script>&ndash;&gt;-->
<!--&lt;!&ndash;<link href="/css/2.15.12/index.min.css" rel="stylesheet">&ndash;&gt;-->
<!--<script src="/js/httpVueLoader.js"></script>-->
<!--<script src="/icons/iconfont.js"></script>-->
<!--<script src="/plugins/axios-0.27.2/axios.min.js"></script>-->
<script src="/js/vue.min.js"></script>
<script src="/js/2.15.12/index.js"></script>
<link href="/css/2.15.12/index.css" rel="stylesheet">
<!--<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/index.min.js"></script>-->
<!--<link href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.min.css" rel="stylesheet">-->
<script src="/plugins/axios-0.27.2/axios.min.js"></script>
<script src="/icons/iconfont.js"></script>
<script src="/js/httpVueLoader.js"></script>
<!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>

<!-- <script src="../plugins/filesaver/FileSaver.js"></script> -->
<script type="text/javascript" src="/js/xlsx.full.min.js"></script>
<script>
    (
        function () {
            new Vue({
                el: '.data-manage-table',
                data() {
                    return {
                        // 描述列表文字居中
                        rowCenter:{
                            "text-align":"center"
                        },
                        //血液状态列表
                        stateList : [],

                        //ABO血型列表
                        aboBloodTypeList : [],

                        //Rh血型列表
                        rhBloodTypeList : [],

                        //血液成分列表
                        bloodComponentList : [],

                        // 血量列表
                        bloodSizeList : [],

                        //血液位置
                        bloodLocationList: [],

                        //血液来源列表
                        bloodSourceList : [],

                        // 血液详情信息描述列表开关
                        dialogDetailVisible  : false,

                        //报废原因列表
                        blooddiscardreasonlist: [],

                        // 血液详情信息描述列表
                        detailDes:{
                        },

                        //分页相关信息
                        pagination: {
                            currentPage: 1, //当前页码
                            pageSize: 2, //每页显示记录数
                            total: 0, //总记录数
                            //查询条件
                            bloodId: '',  //血液编号
                            state: '',  //血液状态
                            aboBloodType: '',   //abo血型
                            rhBloodType: '',    //rh血型
                            dateVal: '',       //日期范围
                            bloodComponent: '', //血液成分
                            bloodCount: '', //血量
                            bloodSource: '', //血液来源
                            bloodLocation : '', //血袋位置
                        },

                        //表格信息
                        tableData: [],

                        // 新增表单显示
                        changeFormVisible: false,

                        // 编辑数据的唯一索引
                        bloodNumIndex: '',
                        size: '',
                        // 新增表单显示
                        DiscardFormVisible : false,
                        RecycleFormVisible : false,
                        // 编辑数据的唯一索引
                        bloodNumIndex: '',
                        recycleform:{
                            bloodId: '',
                            bloodLocation: '',
                            recyclePeople: '',
                            recyclePeopleNumber: ''
                        },
                        user: {
                            "accountNonExpired": true,
                            "accountNonLocked": true,
                            "credentialsNonExpired": true,
                            "enable": false,
                            "enabled": false,
                            "jobnum": "tom",
                            "menuUrls": {
                                "menu": [{
                                    "urls": [{
                                        "id": "11",
                                        "title": "11",
                                        "url": "/pages/error/403.html",
                                        "titleflag": "error"
                                    }], "title": "testerror", "titleflag": "error"
                                }, {
                                    "urls": [{
                                        "id": "22",
                                        "title": "5-5",
                                        "url": "/pages/error/505.html",
                                        "titleflag": "testerror"
                                    }], "title": "testerror2", "titleflag": "testerror"
                                }]
                            },
                            "noLocked": false,
                            "personalization": {
                                "asideFold": false,
                                "mainTabsHeaderFixed": true,
                                "asideControlOpen": false,
                                "headerSkin": "colorful",
                                "headerFixed": false,
                                "skin": "brown",
                                "asideSkin": "dark",
                                "asideControlFixed": true
                            },
                            "username": "tom"
                        },
                        discardform: {
                            id:'',
                            bloodId: '',
                            scrapReason: '',
                            applicantId: '',
                            measurementUnit: '',
                            aboBloodType: '',   //abo血型
                            rhBloodType: '',    //rh血型
                            bloodCount: '',
                            bloodAmount : '',
                            bloodSource:'',
                            bloodComponent : '', //血液成分
                            barcode: '',
                            applicant: '',
                        },
                        // 编辑表格信息
                        editForm: {
                            bloodCount: '',
                            aboBloodType: '',
                            rhBloodType: '',
                            state: '',
                            bloodLocation: '',
                            bloodAmount: '',
                        }
                    }
                },

                //自动触发写入的函数
                created() {
                    this.getByQueryPage();
                },


                mounted() {
                    this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};
                    this.getState();
                    this.getAboBloodType();
                    this.getRhBloodType();
                    this.getBloodComponent();
                    this.getBloodDiscardReason();
                    this.getBloodLocation();
                    this.getBloodSize();
                    this.getBloodSource();
                },

                methods: {
                    selectBlur(e){
                        if (e.target.value !== ''){
                            this.pagination.state = e.target.value;
                            this.$forceUpdate() //强制更新
                        }
                    },

                    // 清空状态
                    selectClearState(){
                        this.pagination.state = ''
                        this.$forceUpdate();
                    },

                    // 输入状态
                    selectChangeState(val){
                        this.pagination.state = val
                        this.$forceUpdate();
                    },

                    // 清空血液成分
                    selectClearComponent(){
                        this.pagination.bloodComponent = ''
                        this.$forceUpdate();
                    },

                    // 输入血液成分
                    selectChangeComponent(val){
                        this.pagination.bloodComponent = val
                        this.$forceUpdate();
                    },
                    viewInfo(row){
                        this.detailDes.barcode = row.barcode;
                        this.detailDes.extendCode = row.extendCode;
                        this.detailDes.bloodComponent = this.getBloodComponentName(row.bloodComponent);
                        this.detailDes.bloodCount = this.getBloodSizeName(row.bloodCount);
                        this.detailDes.aboBloodType = this.getAboBloodName(row.aboBloodType);
                        this.detailDes.rhBloodType = this.getRhBloodName(row.rhBloodType);
                        this.detailDes.failureTime = row.failureTime;
                        this.detailDes.collectTime = row.collectTime;
                        this.detailDes.bloodSource = this.getBloodSourceName(row.bloodSource);
                        this.detailDes.state = this.getStateName(row.state);
                        this.detailDes.inboundAmount = row.inboundAmount;
                        this.detailDes.bloodId = row.bloodId;
                        this.detailDes.bloodLocation = this.getBloodLocationName(row.bloodLocation);
                        this.detailDes.bloodAmount = row.bloodAmount;
                        this.detailDes.measurementUnit = row.measurementUnit;
                        this.detailDes.batchNumber = row.batchNumber;
                        this.dialogDetailVisible = true;
                    },

                    //分页查询
                    getByQueryPage: function (flag) {
                        //用于重置搜索条件
                        if (flag != 1) {
                            this.pagination.bloodId = '';
                            this.pagination.state = '';
                            this.pagination.aboBloodType = '';
                            this.pagination.rhBloodType = '';
                            this.pagination.startTime = '';
                            this.pagination.endTime = '';
                            this.pagination.dateVal = '';
                            this.pagination.startTime = '';
                            this.pagination.endTime = '';
                            this.pagination.bloodComponent = '';
                            this.pagination.bloodCount = '',
                            this.pagination.bloodSource =  '',
                            this.pagination.bloodLocation = '',
                            this.pagination.currentPage = 1;
                        }
                        axios.get('/bloodInformation/normal/' + this.pagination.currentPage + '/' + this.pagination.pageSize,
                            {
                                params: {
                                    bloodId: this.pagination.bloodId,
                                    state: this.pagination.state,
                                    aboBloodType: this.pagination.aboBloodType,
                                    rhBloodType: this.pagination.rhBloodType,
                                    bloodComponent: this.pagination.bloodComponent,
                                    bloodCount : this.pagination.bloodCount,
                                    bloodLocation : this.pagination.bloodLocation,
                                    bloodSource : this.pagination.bloodSource,
                                    collectTime: this.pagination.startTime,
                                    failureTime: this.pagination.endTime,
                                }
                            }).then((res) => {
                            console.log(res.data);
                            if (res.data.code === "200") {
                                this.pagination.pageSize = res.data.data.size;
                                this.pagination.currentPage = res.data.data.current;
                                this.pagination.total = res.data.data.total;
                                this.tableData = res.data.data.records;
                            } else {
                                this.$message.success("查询失败");
                            }
                        });
                    },

                    // 获取状态字典
                    getState(){
                        axios.get('/state/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200'){
                                    this.stateList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title : '错误',
                                        message : '获取数据失败'
                                    })
                                }
                            })
                    },
                    // 将表格中的State字段的code转换成name
                    getStateName(code){
                        for (var i=0;i<this.stateList.length;i++){
                            if (this.stateList[i].code == code){
                                return this.stateList[i].state
                            }
                        }
                    },

                    // 获取abo血型字典
                    getAboBloodType(){
                        axios.get('/aboType/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.aboBloodTypeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中aboBloodType字段的code转换成name
                    getAboBloodName(code){
                        for (var i = 0; i < this.aboBloodTypeList.length; i++) {
                            if (this.aboBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.aboBloodTypeList[i].name;
                            }
                        }
                    },
                    // 获取血液来源字典
                    getBloodSource(){
                        axios.get('/bloodSource/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodSourceList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中BloodSource字段的code转换成name
                    getBloodSourceName(code){
                        for (var i = 0; i < this.bloodSourceList.length; i++) {
                            if (this.bloodSourceList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodSourceList[i].source;
                            }
                        }
                    },
                    // 获取血量字典
                    getBloodSize(){
                        axios.get('/bloodSize/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodSizeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中bloodCount字段的code转换成size
                    getBloodSizeName(code){
                        for (var i = 0; i < this.bloodSizeList.length; i++) {
                            if (this.bloodSizeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodSizeList[i].size;
                            }
                        }
                    },
                    // 获取报废原因字典
                    getBloodDiscardReason(){
                        axios.get('/bloodDiscardReason/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.blooddiscardreasonlist = res.data.data
                                    console.log("1111111111111111111111111111")
                                    console.log(this.blooddiscardreasonlist)
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中bloodDiscardReason字段的code转换成name
                    getblooddiscardreasonName(code){
                        for (var i = 0; i < this.blooddiscardreasonlist.length; i++) {
                            if (this.blooddiscardreasonlist[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.blooddiscardreasonlist[i].name;
                            }
                        }
                    },


                    // 获取rh血型字典
                    getRhBloodType(){
                        axios.get('/rhType/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.rhBloodTypeList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中rhType字段的code转换成name
                    getRhBloodName(code){
                        for (var i = 0; i < this.rhBloodTypeList.length; i++) {
                            if (this.rhBloodTypeList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.rhBloodTypeList[i].name;
                            }
                        }
                    },


                    // 获取血液成分字典
                    getBloodComponent(){
                        axios.get('/bloodComposition/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodComponentList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },

                    // 将表格中bloodComponent字段的code转换成name
                    getBloodComponentName(code){
                        for (var i = 0; i < this.bloodComponentList.length; i++) {
                            if (this.bloodComponentList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodComponentList[i].composition;
                            }
                        }
                    },
                    // 获取血液位置字典
                    getBloodLocation(){
                        axios.get('/bloodLocation/normal/getName')
                            .then((res)=>{
                                if (res.data.code === '200') {
                                    this.bloodLocationList = res.data.data
                                } else {
                                    this.$notify.error({
                                        title: '错误',
                                        message: '获取数据失败',
                                    })
                                }
                            })
                    },
                    // 将表格中bloodLocation字段的code转换成name
                    getBloodLocationName(code){
                        for (var i = 0; i < this.bloodLocationList.length; i++) {
                            if (this.bloodLocationList[i].code == code) { //dictValue，dictLabel保持和上面定义一致
                                return this.bloodLocationList[i].location;
                            }
                        }
                    },


                    // 获取时间
                    dateFormat(picker) {
                        this.pagination.startTime = picker[0].getFullYear() + '-' + this.handleTimeStr(picker[0].getMonth() + 1) + '-' + this.handleTimeStr(picker[0].getDate()) + ' 00:00:00';
                        this.pagination.endTime = picker[1].getFullYear() + '-' + this.handleTimeStr(picker[1].getMonth() + 1) + '-' + this.handleTimeStr(picker[1].getDate()) + ' 00:00:00';
                    },

                    // 分页查询 每页显示多少条数据
                    handleSizeChange: function (pageSize) {
                        this.pagination.pageSize = pageSize;
                        this.getByQueryPage(1);
                    },

                    //分页查询 切换页码
                    handleCurrentChange: function (currentPage) {
                        this.pagination.currentPage = currentPage;
                        //执行查询
                        this.getByQueryPage(1);
                    },

                    // 时间标准化
                    handleTimeStr(tStr) {  // 解决 10:2:2 出现各位数字格式化为 10:02:02
                        if (tStr < 10) {
                            return '0' + tStr
                        } else {
                            return tStr
                        }
                    },

                    // 编辑表格
                    editTableData(row) {
                        this.bloodNumIndex = row.bloodId;
                    },
                    recycleTableData(row){
                        this.recycleform.bloodId = row.bloodId;
                        this.recycleform.bloodLocation =row.bloodLocation;
                        this.recycleform.recyclePeopleNumber = this.user.jobnum;
                        this.recycleform.recyclePeople = this.user.username;
                    },
                    discardTableData(row){

                        this.discardform.id= row.id;
                        this.discardform.bloodId =row.bloodId;
                        this.discardform.aboBloodType=row.aboBloodType;
                        this.discardform.barcode = row.barcode;
                        this.discardform.bloodComponent = row.bloodComponent;
                        this.discardform.bloodCount = row.bloodCount;
                        this.discardform.measurementUnit = row.measurementUnit;
                        this.discardform.rhBloodType = row.rhBloodType;
                        this.discardform.bloodAmount = row.bloodAmount;
                        this.discardform.bloodSource = row.bloodSource;
                        this.discardform.applicantId = this.user.jobnum;
                        this.discardform.applicant = this.user.username;
                    },

                    //回收确认
                    RecycleDetermine(){
                        axios.post("/recycle/normal/Data", this.recycleform).then(res => {
                            if (res) {
                                this.$notify({
                                    title : '成功',
                                    message : '血袋回收成功',
                                    type : 'success',
                                })
                                this.RecycleFormVisible = false
                                this.getByQueryPage(0)
                            } else {
                                this.$message.error("保存失败")
                            }
                        })
                    },
                    //报废确认
                    DiscardDetermine(){

                        console.log(this.discardform)
                        axios.post('/discard/normal/Data', this.discardform).then(res => {
                            if (res) {
                                this.$notify({
                                    title : '成功',
                                    message : '血液报废成功',
                                    type : 'success',
                                })
                                this.getByQueryPage(0)
                                this.DiscardFormVisible = false
                            } else {
                                this.$message.error("保存失败")
                            }
                        })
                    },
                    //取消按钮
                    cancel() {
                        this.editForm.bloodCount = ''
                        this.editForm.aboBloodType = ''
                        this.editForm.rhBloodType = ''
                        this.editForm.state = ''
                        this.editForm.bloodLocation = ''
                        this.editForm.bloodAmount = ''
                        this.changeFormVisible = false
                    },

                    // // 导出数据为excel
                    // exportExcel() {
                    //     console.log("已进入导出接口")
                    //     // 1.生成Excel工作簿对象
                    //     var wb = XLSX.utils.table_to_book(document.querySelector('#tableInfo'));
                    //     // 2.手机号，身份证号等会默认使用科学计数法表示，则需要这样设置
                    //     var wb = XLSX.utils.table_to_book(
                    //         document.querySelector("#tableInfo"),
                    //         {raw: true}
                    //     );
                    //     // 获取二进制字符串作为输出
                    //     var wbout = XLSX.write(wb, {
                    //         bookType: 'xlsx',
                    //         book: true,
                    //         type: 'array',
                    //     })
                    //     try {
                    //         saveAs(
                    //             // Blob: 对象表示一个不可变 原始数据的类文件对象,不一定是JS原生格式的数据。
                    //             // File: 基于Blob，继承了blob的功能并将其扩展使其支持用户系统上的文件。
                    //             new Blob([wbout], {type: 'appliction/octet-stream'}),
                    //             // 设置导出的文件名称可随意
                    //             'result.xlsx'
                    //         )
                    //     } catch (e) {
                    //         if (typeof console != 'undefined') console.log(e, wbout);
                    //     }
                    //     // 返回一个新创建的Blob对象，其内容由参数中给定的数组串联组成。
                    //     return wbout
                    // },


                }
            });
        })()
</script>

</body>
</html>